<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学生查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
       <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>学生出勤管理</cite>
          <cite> / 查看出勤情况</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="font-size: 18px; line-height: 35px;">刷新</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <div class="layui-input-inline" name="classname" id="classname" placeholder="请输入课程名称">
                <select name="record" lay-verify="required" id="bycourse">
                    <option value="">请选择课程</option>
                </select>
            </div>
            <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <xblock>
        <span class="x-left" style="line-height:40px">您所查询的出勤情况如下：</span>

    </xblock>
    <table id="student-query" class="layui-table">

    </table>


</div>
<script>
    var form, layedit, layer, laydate;

    layui.use(['form', 'layedit', 'layer', 'laydate'], function () {

        form = layui.form;
        layer = layui.layer
        layedit = layui.layedit

        laydate = layui.laydate;

        selectRoleName();    // 调用查询方法
    })

    function selectRoleName() {

        $.ajax({

            url: "/api/course",
            type: "GET",
            success: function (result) {
                let role = $("#bycourse");
                let id_table = [];
                let data = result.data;
                $.each(data, function (index, item) {
                    if(id_table.findIndex(ele => ele.cid == item.cid) == -1){
                        id_table.push(item)
                    }
                });
                id_table.sort((a,b) => {return a.cid - b.cid});
                $.each(id_table, function (index, item) {
                    let option = $("<option></option>");
                    option.text(item.cname + "#00" + item.cid)
                    option.val(item.cid)
                    role.append(option);
                });

                form.render("select");
            }
        });

    }

</script>
<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var record_date;
        //监听提交
        //响应按钮
        form.on('submit(search)', function (data) {
            console.log(data);
            var t = $("#bycourse").val();//获取选中的下拉框值
            var record_date;
            $.get(
                "/api/record"
                , {m: 0, cid: t}
                , function (response) {
                    record_date = response.data
                    $.each(record_date, function (index, item) {
                        item["action"] = '<button class="layui-btn layui-btn-xs" onclick="x_admin_show(\'反馈\',\'student-feedback.html?&r_id='+item['rid'] + '&status='+ item["status"] +'\',700,400)">反馈</button>';
                        if (item["status"] == 0) {
                            item["status"] = "<span style='color:#5FB878;'>出勤</span>"
                        } else if (item["status"] == 1) {
                            item["status"] = "<span style='color:#FF5722;'>旷课</span>"
                        } else if (item["status"] == 2) {
                            item["status"] = "<span style='color:#FFB800;'>请假</span>"
                        }


                    })
                    layui.use('table', function () {
                        var table = layui.table;

                        //第一个实例
                        table.render({
                            elem: '#student-query'
                            , height: 480
                            , page: true //开启分页
                            , cols: [[ //表头
                                {field: 'date', title: '课程时间', sort:true, fixed: 'left'}
                                , {field: 'number', title: '节次', sort:true}
                                , {field: 'tname', title: '授课教师', sort:true}
                                , {field: 'status', title: '出勤状态', sort:true, align:'center'}
                                , {field: 'action', title: '操作'}
                                ,
                            ]]
                            , data: record_date
                        });

                    });

                }
            )
            return false;


        })
    })
</script>

</body>

</html>


